<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户申请列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <template>
        <div class="block">
            <span class="demonstration">企业名称：</span>
            <el-input v-model="name" placeholder="请输入企业名称" style="width: 180px"></el-input>
            &nbsp;&nbsp;
            <span class="demonstration">申请时间：</span>
            <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="time"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="loadChecks">查询</el-button>
        </div>

    </template>
    <template>
        <el-table style="width: 100%"
                  :data="tPars"
                  ref="tParTable">
            <el-table-column label="id" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="公司名称" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.scompany.companyName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="公司区域" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.scompany.companyAddress }}</span>
                </template>
            </el-table-column>

            <el-table-column label="主要经营" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.scompany.companyScope }}</span>
                </template>
            </el-table-column>

            <el-table-column label="申请状态" width="80">
                <template slot-scope="scope">
                    <div v-if="scope.row.tparStatus2 == '未查看'" style="background-color:yellow;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">{{ scope.row.tparStatus2 }}</span></div>
                    <div v-if="scope.row.tparStatus2 == '已拒绝'" style="background-color:red;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">{{ scope.row.tparStatus2 }}</span></div>
                    <div v-if="scope.row.tparStatus2 == '已同意'" style="background-color:green;width: 60px;height: 22px;color: black"><span style="margin-left: 10px">{{ scope.row.tparStatus2 }}</span></div>
                </template>
            </el-table-column>

            <el-table-column label="申请时间" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tparTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px;">{{ scope.row.tparDesc }}</span>
                </template>
            </el-table-column>

            <el-table-column label="申请成为" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.tparRel == 1" style="margin-left: 10px;">客户</span>
                    <span v-if="scope.row.tparRel == 0" style="margin-left: 10px;">供应商</span>
                </template>
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div v-if="scope.row.tparStatus2 == '未查看'">
                        <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <el-popconfirm title="确定忽略吗？" @confirm="tParDel(scope.$index, scope.row)">
                            <el-button  size="mini" icon="el-icon-edit" slot="reference" type="primary" @click="handleEdit2(scope.$index, scope.row)">忽略</el-button>
                        </el-popconfirm>
                    </div>
                    <div v-else>
                        <el-button size="mini" icon="el-icon-edit" disabled>编辑</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
        <el-dialog title="申请合作" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
            <template>
                <span>申请成为：</span>
                <el-radio disabled v-model="radio" label="1">客户</el-radio>
                <el-radio disabled v-model="radio" label="0">供应商</el-radio><br><br><br><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-popconfirm title="确定同意吗？" @confirm="buttonOk">
                    <el-button slot="reference" type="primary">同 意</el-button>
                </el-popconfirm>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-popconfirm title="确定拒绝吗？" @confirm="open">
                    <el-button slot="reference" type="primary">拒 绝</el-button>
                </el-popconfirm>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </template>
</div>
</body>
<script>


    new Vue({
        el: "#app",
        data(){
            return{
                // 当前页数
                currentPage: 1,
                // 订单总数
                count : 0,
                // 每页的数据
                page_size : [6,3],
                // 当前每页的数据
                pageSize : 6,
                // 分页背景
                back: true,
                tPars: [],
                tPar: {},
                name:"",
                time:"",
                radio:"",
                button:"",
                del:"",
                dialogFormVisible:false,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                }
            }
        },
        methods:{
            loadChecks(){
                axios.get("/checks/page/" + this.currentPage + "/" + this.pageSize + "?name=" + this.name + "&time=" + this.time)
                    .then(res => {
                        this.tPars = res.data.data;
                        this.count = res.data.count;
                        console.log(this.tPars)
                    });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadChecks();

            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadChecks();
            },
            handleEdit(index, row) {
                this.tPar = row;
                this.radio = this.tPar.tparRel;
                this.dialogFormVisible = true;
            },
            handleEdit2(index, row) {
                this.tPar = row;
            },
            closeDialog() {
                this.radio = "";
            },
            buttonOk(){
                this.button = "已同意";
                axios.put("/customer/supplier/"+this.button,this.tPar)
                    .then(res => {
                        if (res.data == "ok"){
                            this.dialogFormVisible = false;
                            this.loadChecks();
                        }
                    });

            },
            buttonNo(value){
                this.button = "已拒绝";
                this.tPar.tparDesc = value;
                axios.put("/tPar/no/" + this.button,this.tPar)
                    .then(res => {
                        if (res.data == "ok"){
                            this.dialogFormVisible = false;
                            this.loadChecks();
                        }
                    });

            },
            open() {
                this.$prompt('请输入拒绝理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\u4e00-\u9fa5a-zA-z0-9,_]/,
                    inputErrorMessage: '拒绝理由不能为空'
                }).then(( {value} ) => {
                    this.$message({
                        type: 'success',
                        message: '拒绝成功: '
                    });
                    this.buttonNo(value);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },
            tParDel(index,row){
                this.del = "已忽略";
                axios.put("/tParDel/" + this.del,this.tPar)
                    .then(res => {
                        if (res.data == "ok"){
                            this.loadChecks();
                            this.del = "";
                            this.tPar = {};
                            this.loadChecks();
                        }
                    });
            }
        },
        mounted(){
            this.loadChecks();
        }
    });
</script>
</html>